import React from 'react';
//  实现一个自定义hook, 该hook主要用来获取当前浏览器是否在线,也就是否有网的状态
// 当没有网络的时候,显示断开. 当有网络的时候, 显示连接

// 思路:
// 需要借助bom中的一个对象 navigator 对象, 该对象中有一个属性 onLine返回true或false
// true 表示有网络
// false 表示没网

import { useEffect, useState } from 'react';
const Base = () => {

    // console.log('navigator', navigator.onLine)

    const [online, setOnline] = useState(navigator.onLine)
    // console.log('online', online);
    // 希望监测到修改网络状态的行为. 当把网络状态修改完 离线. 触发一个事件, 在该事件执行函数中 setOnline(false)
    // 当把网络状态修改为在线的时候, 触发一个事件,在该事件的执行函数中, setOnline(true)
    // js 提供了两个事件, 用来监听当前网络状态的
    // online 事件: 当修改网络状态为在线的时候触发该事件
    // offline 事件: 当修改网络状态为离线的时候, 触发该事件


    // 给window绑定事件, 
    // window.addEventListener('online', () => {
    //     console.log('在线');
    //     setOnline(true)

    // })

    // window.addEventListener('offline', () => {
    //     console.log('离线');
    //     setOnline(false)
    // })

    const on = () => {
        console.log('在线');
        setOnline(true)
    }

    const off = () => {
        console.log('离线');
        setOnline(false)
    }

    useEffect(() => {
        // console.log('初始化')
        window.addEventListener('online', on)

        window.addEventListener('offline', off)

        return () => {
            // console.log('return');
            window.removeEventListener('online', on)
            window.removeEventListener('offline', off)
        }
    })

    return (
        <div>
            当前的网络状态: {online ? '在线' : '离线'}
        </div>
    );
}

export default Base;
